<template>
  <div class="group-page">
    <div class="item" v-for="(item, index) in userBuyList" :key="index">
      <div class="info">
        <img :src="item.userImg" mode="aspectFit" class="img">
        <div class="p-info">
          <h3 class="id" v-if="item.userName">{{item.userName}}</h3>
          <p class="phone"><a @click="tel(item.mobile)">电话：{{item.mobile}}</a></p>
          <p class="address"><i>地址：</i>{{item.address}}</p>

          <p class="name" v-for="($item, $index) in item.product" :key="$index">{{$item.title+ '*' +$item.sales}}</p>
          <p class="name">总价：{{item.count}}</p>
          <div class="btn" :class="item.status == '已发货' ? 'disable' : ''" @click="notification(item.userId, item.status)">{{item.status}}</div>
        </div>
      </div>
    </div>

    <cover :config="{title: '已发货'}" v-if="showCover"></cover>
    <nullList v-if="showNull" :config="{}"></nullList>
  </div>
</template>

<script>
import cover from '@/components/cover'
import nullList from '@/components/nullList'
import { messageStatus, userLogin } from '@/utils/index'
export default {
  data () {
    return {
      groupId: '',
      orderList: [],
      showNull: false,
      showCover: false,
      userBuyList: {},
    }
  },
  components: {
    cover,
    nullList
  },
  methods: {
    tel (phone) {
      if (phone) {
        wx.makePhoneCall({
          phoneNumber: phone
        })
      }
    },
    async requestData () {
      var that = this
      var userBuyList = {}

      wx.showToast({
        icon: 'loading',
        title: '请求中...',
        duration: 50000
      })
      //获取该团购产品信息
      try {
        var productList = await this.$request({
          url: '/GroupBuyBackendV1/getProductListByGroupId/' + that.groupId
        })
        //默认购买分数
        productList.forEach(function(item, index) {
          item.buyNum = 0
        })

        //再获取某个产品的销售数量
        var productSale = await this.$request({
          url: '/GroupBuyBackendV1/groupOrderByGroupId/' + that.groupId
        })

        this.orderList = productSale
        if (productSale.length == 0) {
          this.showNull = true
        }

        if (productSale.length) {
          //获取产品销量
          var saleLength = {}
          for (var i in productSale) {
            if (!saleLength[productSale[i].productId]) {
              saleLength[productSale[i].productId] = 0
            }
            saleLength[productSale[i].productId] += productSale[i].count
          }

          productList.forEach(function(item, index) {
            //产品销售数量
            if (saleLength[item.productId]) {
              item.sale = saleLength[item.productId]
            }
            //当前用户是否已经报名
            if (item.userId == that.userId) {
              for (var i in productSale) {
                if (productSale[i].userId == that.userId && productSale[i].productId == item.productId) {
                  item.buyNum = productSale[i].count
                  item.updateId = productSale[i].groupOrderId
                }
              }
            }
          })
        }
        //获取产品列表对应的空值
        function getProduct () {
          var returnData = {}
          productList.forEach(function(item, index) {
            returnData[item.productId] = {
              title: item.title,
              sales: 0,
              price: item.price
            }
          })
          return returnData
        }
        //获取统计 相同uid数据拼接
        productList.forEach(function(item, index) {
          var pid = item.productId
          var sale = item.sale
          var title = item.title
          //循环一次寻找用户对应的id
          productSale.forEach(function(u, ss) {
            if (!userBuyList[u.userId]) {
              userBuyList[u.userId] = {
                count: 0,
                status: u.status,
                userId: u.userId,
                userName: u.userNickName,
                userImg: u.userImageUrl,
                product: getProduct()
              }
            }
            if (pid == u.productId) {
              userBuyList[u.userId].product[pid].sales = u.count
            }
          })
        })
        for (var u in userBuyList) {
          var ui = userBuyList[u]
          if (ui.product) {
            for (var s in ui.product) {
              var pi = ui.product[s]
              if (pi.sales > 0) {
                ui.count += pi.sales*pi.price
              }
            }
            ui.status = messageStatus(ui.status,2)
          }
          //如果没有购买则删除
        }
        //查找用户id
        for (var i in userBuyList) {
          var item = userBuyList[i]
          var user = await this.$request({
            url: '/GroupBuyBackendV1/user/'+ item.userId
          })
          item.userName = user.name
          item.mobile = user.mobile
          item.address = user.address
        }
        this.userBuyList = userBuyList
        wx.hideToast()
      } catch (e) {
        wx.showToast({
          icon: 'none',
          title: e
        })
      }
    },
    async fixStatus (uid) {
      var that = this
    
      for (var i in this.orderList) {
        var ui = this.orderList[i]
        if (ui.userId == uid) {
          var data = ui
          data.status = '已发货'
          await this.$request({
            type: 'POST',
            data: data,
            url: '/GroupBuyBackendV1/groupOrder'
          })
        }
      }
      for (var i in this.userBuyList) {
        var item = this.userBuyList[i]
        if (item.userId == uid) {
          item.status = '已发货'
        }
      }
      that.showCover = true
      setTimeout(function () {
        that.showCover = false
      }, '2000')
    },
    notification (uid,status) {
      var that = this;
      //可以通知
      if (uid) {
        if (status == '已发货') {
          wx.showToast({
            icon: 'none',
            title: '该用户已发货'
          })
          return
        }
        wx.showModal({
          content: '是否确认已发货',
          success: function (res) {
            //调用通知方法
            if (res.confirm) {
              that.fixStatus(uid)
            }
          }
        })
      }
    }
  },
  mounted () {
    userLogin()
    this.groupId = this.$root.$mp.query.groupId
    this.requestData()
  },
  onUnload () {
    this.groupId = ''
    this.orderList = []
    this.showNull = false
    this.showCover = false
    this.userBuyList = {}
  }
}
</script>

<style lang="stylus" scoped>
.group-page {
  padding-top: 20rpx
}
.item {
  position: relative
  font-size: 28rpx
  margin: 30rpx
  padding-bottom: 30rpx
  border-bottom: 1px solid #f4f4f4
  .img {
    width: 84rpx
    height: 84rpx
    position: absolute
    border-radius: 50%
  }
  .p-info {
    margin-left: 114rpx
    color: #131313
    p {
      padding: 6rpx 0
      font-size: 26rpx
    }
    .address {
      position: relative
      i {
        left: 0
        top: 6rpx
        position: absolute
      }
      padding-left: 80rpx
    }
    .id {
      font-size: 32rpx
    }
    .name {
      position: relative
      padding-right: 200rpx
      em {
        right: 0
        top: 0
        position: absolute;
      }
    }
    .phone {
      a {
        color: #576B95
        display: inline
      }
    }
    .btn {
      top: 10rpx
      right: 0
      position: absolute
      width: 120rpx
      height: 62rpx
      color: #fff
      font-size: 28rpx
      line-height: 62rpx
      text-align: center
      background: #ff8942
      border-radius: 31rpx
    }
    .disable {
      color: #131313
      background: #eae9e9
    }
  }
}

</style>
